<template>
  <div class="history-order">
    <instiutionTable ref="tableRef"
      class="instiutionTable"
      :pages="tablePages"
      :instiutionTableData="list"
      :instiutionTableHeader="tableHeader"
      @sizeChange="sizeChange"
      @currentChange="currentChangeFun">
      <template #orderNo="{ scope }">
        <div class="blue-text" @click="clickOrderNo(scope.row)">{{ scope.row.orderNo }}</div>
      </template>
      <template #orderStatus="{ scope }">
        <span class="order-status" :style="{border: '1px solid ' + orderStatusMap[scope.row.orderStatus].color, color: orderStatusMap[scope.row.orderStatus].color}">{{ orderStatusMap[scope.row.orderStatus].name }}</span>
      </template>
      <template #oper="{ scope }">
        <span class="blue-text" @click.stop="clickOrderNo(scope.row)">查看</span>
      </template>
    </instiutionTable>
      <el-drawer
        title="工单详情"
        custom-class="m7-drawer my-drawer history-order-dialog"
        size="800px"
        :append-to-body="true"
        :visible.sync="dialogVisible"
      >
      <editBusiness :noBorder="true" :checkRead="false" :isOnlyShow="true" :agentList="agentListArr" ref="editBusiness1">
      </editBusiness>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Ref } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
import instiutionTable from '@/common/views/institutionTable/institutionTable.vue'
import { CommonModule } from '@/store/modules/common'
import { orderStatusMap } from '../utils/staticData'
import editBusiness from './editBusiness.vue'
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash';

@Component({
  name: 'historyOrder',
  components: {
    instiutionTable,
    editBusiness: () => import('./editBusiness.vue')
  }
})
export default class Queue extends Vue {
  @Ref() private readonly addOrEditBusinessRef !: editBusiness
  [x: string]: any
  @Prop(Array) public fieldList!: any
  @Prop(Object) public form!: any
  @Prop(Object) public oldBussinessMsg!: any
  private dialogVisible = false
  private tablePages = { // 表格分页
    current: 1,
    pageSize: 10,
    total: 0
  }

    private tableHeader: any[] = [ // 表头
      { label: '工单编号', prop: 'orderNo', custom: true },
      { label: '创建时间', prop: 'createTime' },
      { label: '创建人', prop: 'createUser' },
      { label: '工单类型', prop: 'orderCategory' },
      { label: '工单状态', prop: 'orderStatus', custom: true },
      { label: '当前节点', prop: 'activityName' },
      { label: '当前处理人', prop: 'master' },
      { label: '操作', prop: 'oper', custom: true }
    ]

  private list = []

  private get orderStatusMap () {
    return orderStatusMap
  }

  private get agentListArr () {
    const agents = cloneDeep(CommonModule.publicCache.userListObj)
    const agentsArr: any = []
    for (const i in agents) {
      agentsArr.push({ key: agents[i]._id, label: agents[i].name })
    }
    return agentsArr
  }

  private clickOrderNo (obj: any) {
    this.dialogVisible = true
    this.$nextTick(() => {
      console.log(this.addOrEditBusinessRef);
      (this.$refs.editBusiness1 as any).getBusinessDataById(obj)
    })
  }

  private get userfieldId () {
    let str = ''
    this.fieldList.forEach(item => {
      if (item.fieldType === 'associateUser') {
        str = item.businessId
      }
    })
    return str
  }

  private sizeChange (size: number) {
    this.tablePages.pageSize = size
    this.queryList()
  }

  private currentChangeFun (page: number) { // 翻页
    this.tablePages.current = page
    this.queryList()
  }

  private queryList () {
    console.log(this.oldBussinessMsg)
    const userTableObj = this.oldBussinessMsg[this.userfieldId]
    if (userTableObj && userTableObj.customId) {
      const data = {
        orderId: this.form.id,
        customerId: userTableObj.customId,
        page: {
          pageNumber: this.tablePages.current,
          pageSize: this.tablePages.pageSize
        }
      }
      commonAction({
        url: '/server-work/action/workOrder/history',
        method: 'post',
        data
      }).then(res => {
        if (res.success) {
          const list = res.data.list || []
          const total = res.data.page.total
          list.forEach(item => {
            const agentObj = item.createUser && cloneDeep(CommonModule.publicCache.userListObj)[item.createUser]
            item.createUser = item.createUserName || (agentObj ? agentObj.name : '--')
            const agentObj1 = item.master && cloneDeep(CommonModule.publicCache.userListObj)[item.master]
            item.master = agentObj1 ? agentObj1.name : '--'
          })
          this.list = list
          this.tablePages.total = total
        }
      })
    }
  }

  private mounted () {
    this.queryList()
  }
}
</script>

<style lang="stylus" scoped>
.blue-text {
  color: #008bee;
  cursor: pointer;
}
.history-order {
  height: calc(100% - 189px);
}
</style>
<style lang="stylus">
.history-order-dialog {
  .business-box {
    box-shadow: none;
    border: none;
    height: 600px;
  }
}
.order-status {
  border-radius: 4px;
  border: 1px solid #B3B9C7;
  color: #B3B9C7
  padding: 1px 8px;
  font-size: 12px;
  line-height: 14px;
  height: 20px;
}
</style>
